<template>
    <div class="home">
        <div class="home-l">
            <el-card class="card">
                <NewPart></NewPart>
            </el-card>
        </div>
        <div class="home-r">
            <el-card class="card">
                <ArticleCategory></ArticleCategory>
            </el-card>
            <el-card class="card">
                <Ad></Ad>
            </el-card>
            <!-- <el-card class="card">
                <Carousel></Carousel>
            </el-card> -->
        </div>
    </div>
</template>

<script>
import NewPart from './new-part'
import ArticleCategory from './article-category'
import Ad from './ad'
import Carousel from './carousel'

export default {
    name: 'home',
    components: {
        NewPart,
        ArticleCategory,
        Ad,
        Carousel,
    },
    computed: {

    },
    methods: {
        toUserPage(uid) {
            window.open(`/user/space/${uid}`, '_blank');
        }
    },
}
</script>

<style scoped>
.home {
    padding-top: 15px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.card {
    margin-bottom: 20px;
}

.news-part {
    display: flex;
}

.home-l {
    width: 880px;
}

.home-r {
    width: 300px;
}

.clearfix {
    border-left: 4px solid #409EFF;
    padding-left: 10px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}

.platers {
    font-size: 15px;
    font-weight: 500;
}

.platers span:hover {
    color: #409EFF;
    cursor: pointer;
}
</style>